<template>
  <div class="mes_tree task_tree" :class="treeClose?'tree_close':''">
    <tree-flod-btn @toggleTree="toggleTree"></tree-flod-btn>
    <el-container v-if="!treeClose">
      <el-header height="unset">
        <tree-search-from @search="handleSearch"></tree-search-from>
      </el-header>
      <el-main v-loading="isLoading">
        <el-scrollbar ref="scrollbar">
          <div class="search_empty" v-if="taskList.length === 0&&!isLoading">
            <img width="120" src="@/assets/img/pic_default_empt_search.png" alt="">
            <p class="no_data">暂无数据</p>
          </div>
          <el-tree
            ref="elTree"
            v-else
            node-key="label"
            :data="taskList"
            :default-expanded-keys="defaultExpandedKeys"
            :props="defaultProps"
            check-on-click-node
            :expand-on-click-node="false"
            highlight-current
            @node-click="handleNodeClick"
            @node-expand="handleNodeExpand">
            <div
              slot-scope="{ node, data }">
              <span class="el-tree-node__label">
                {{node.label}}<span v-if="node.level === 2">/{{data.product}}</span>
              </span>
            </div>
          </el-tree>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import TreeFlodBtn from '../../TreeFlodBtn'
import TreeSearchFrom from '../treeSearchForm/Index'
import treeUtil from '../treeUtil'
import TreeService from '../TreeService'

export default {
  name: 'TaskBomTree',
  mixins: [TreeService],
  components: {
    TreeFlodBtn,
    TreeSearchFrom
  },
  data() {
    return {
      defaultProps: [{
        children: 'children',
        label: 'label',
      }],
      defaultExpandedKeys: [], // 默认展开的节点
      treeClose: false, // 树关闭状态
      selectedNode: '',
      taskList: [],
      treeClientHeight: 0,
      isLoading: false // 数据加载中
    }
  },
  methods: {
    // 获取科分任务树
    init() {
      this.initTaskNumberTree()
    },
    // 初始化任务号树，并将任务号展开
    async initTaskNumberTree(query) {
      let taskList = treeUtil.appendChildren(await this.getTaskNumberTree(query))
      this.taskList = taskList
      this.defaultExpandedKeys = taskList.reduce((pre, cur) => [...pre, cur.label], [])
    },
    // 节点展开时
    async handleNodeExpand(data, node) {
      // 当展开任务号时加载任务号下的工单数据
      if (node.level === 2) {
        node.loading = true
        node.expanded = false
        node.data.children = await this.getWorkOrderTree(data.label)
        node.expanded = true
        node.loading = false
        this.$nextTick(() => {
          // 只有一个子节点时直接展开全部下级
          if (Array.isArray(data.children) && data.children.length === 1) {
            treeUtil.expandChildNodes(node)
          }
        })
      }
      if (node.level === 3) {
        treeUtil.expandChildNodes(node)
      }
    },
    // 树节点点击时，触发父组件
    handleNodeClick(data, node) {
      // 二级节点为科分任务号
      if (node.level === 2) {
        this.$emit('selectNode', data.label, [])
      }
      if (node.level > 2 && !node.isLeaf) {
        this.$emit('selectNode', '', treeUtil.getWorkOrderIds([data], []))
      }
      if (node.isLeaf) {
        this.$emit('selectNode', '', ['xxxxxxxxxxxxxxxxxxxxxxxxxxxx'])
      }
    },
    handleSearch(query) {
      this.initTaskNumberTree(query)
    },
    toggleTree(value) {
      this.treeClose = value
    },
  }
}
</script>

<style lang="less">
  .task_tree_container {
    display: flex;
    overflow-x: hidden;
    height: calc(100% - 56px);

    .mes_tree.task_tree {
      position: relative;
      flex: 0 0 350px;

      &.tree_close {
        flex: 0 0 0;
        width: 16px;

        .flod_panel {
          left: 0;
        }
      }
    }

    .task_tree_content {
      flex: 1;
      overflow-x: auto;
    }
  }
</style>
